<template>
    <div
        style="text-align: center;display: flex;justify-content: space-around;
    align-items: center;"
    >
        <div>会员注册</div>
        <span style="font-size: 16px; color: #ccc;">
            已注册
            <router-link style="font-size: 16px;color: rgb(61, 6, 190);" to="/login">直接登录</router-link>
        </span>
    </div>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
                v-model="username1"
                name="username1"
                label="用户名"
                placeholder="用户名"
                :rules="[{ pattern, message: '用户名为4至15位' }]"
            />
            <van-field
                v-model="password1"
                type="password"
                name="password1"
                label="密码"
                placeholder="请输入密码"
                :rules="[{ validator, message: '密码为6至15位' }]"
            />
            <van-field
                v-model="password2"
                type="password"
                name="password2"
                label="密码"
                placeholder="再次输入密码"
                :rules="[{ validator, message: '密码为6至15位' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from "axios";
import { useRouter } from 'vue-router'
import { Toast } from 'vant';
import { Notify } from 'vant';
const router = useRouter()
const username1 = ref('');
const password1 = ref('');
const password2 = ref('');
const pattern = /\w{4,15}/;
const validator = (val: any) => /\w{6,15}/.test(val);


const onSubmit = (values: any) => {

    console.log('submit', values);
    const params = {
        "admin": values.username1,
        "password1": values.password1,
        "password2": values.password2,

    }
    axios.get('http://localhost:8080/api/enroll', { params }).then(
        (response: any) => {
            console.log(response.data);
            const { code, message } = response.data
            if (code === 0) {
                Notify(message);
                username1.value = ''
                password1.value = ''
                password2.value = ''
            } else if (code === 1) {
                Notify(message);
                username1.value = ''
                password1.value = ''
                password2.value = ''
            } else if (code === 2) {
                Toast.success(message);
                router.push({ name: 'login' })
            }
        })

};

</script>

<style>
</style>